<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			/*头部*/
			.mui-bar-nav { background: #fdd100;}
			.mui-pull-left { color: #000;}
			body,.mui-content { background: #fff;}
			.mui-table-view { position: fixed; top: 44px; left: 0; z-index: 2; width: 100%; height: 43px; text-align: center; margin: 0 !important;}
			.mui-table-view .mui-table-view-cell { width: 33.3%; float: left; position: relative;}
			.mui-table-view .mui-table-view-cell:after { content: ""; display: inline-block; width: 1px; height: 34px; background: #ddd; position: absolute; left: 0; top: 6px; }
			.mui-table-view .mui-table-view-cell:first-child:after { display: none;}
			.mui-table-view .mui-table-view-cell .mui-navigate-right { font-size: 14px;}
			.mui-table-view-cell.mui-collapse.mui-active { margin-top: 0; background: #fff; color: #f00;}
			.mui-table-view-cell.mui-collapse.mui-active a:after{ color: #f00;}
			.mui-table-view-cell>a:not(.mui-btn).mui-active { background: #fff;}
			.mui-collapse-content a { display: block; color: #000; line-height: 30px; font-size: 13px; }
			.mui-table-view-cell:first-child .mui-collapse-content { width: 100%; position: fixed;}
			.mui-table-view-cell:first-child .mui-collapse-content a { width: 25%; float: left;  }
			.mui-table-view-cell .mui-collapse-content a { position: relative;}
			.mui-table-view-cell .mui-collapse-content a.on { color: #f00;}
			.mui-table-view-cell .mui-collapse-content a.on:after { font-family: Muiicons; font-size: 22px; line-height: 1; position: absolute; top: 50%; display: inline-block; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-decoration: none; color: #f00; -webkit-font-smoothing: antialiased; right: 6px; content: '\e472';}
			
			.video_list { margin-top: 50px; font-size: 12px;padding: 0 6px;}
			.video_list img { width: 100%;}
			.video_list .mui-table-view-cell { padding:10px; }
			.video_list .mui-table-view-cell:before,.video_list .mui-table-view-cell:after { background: #fff;}
			.video_list .mui-media-body { text-align: left; line-height: 18px !important; margin-top: 0 !important; word-break: break-all;white-space:normal; height: 36px !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2;  overflow: hidden; }
			.video_list span { position: absolute;left:0;bottom: 52px; color: #fff; font-size: 12px; padding-left: 20px;}
			.video_list span i { font-style: normal; display: inline-block;border: 1px #fff solid; border-radius: 100%; width: 14px; padding-left: 2px; height: 14px; line-height: 14px; text-align: center; font-size: 6px; margin-right: 3px; position: relative; top: -2px;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">全部类型</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
			    <li class="mui-table-view-cell mui-collapse">
			        <a class="mui-navigate-right">全部类型</a>
			        <div class="mui-collapse-content">
			        	<a class="on">全部类型</a>
			            <a>鬼步舞</a>
					    <a>古典舞</a>
					    <a>印度舞</a>
					    <a>民族舞</a>
					    <a>新疆舞</a>
					    <a>藏族舞</a>
					    <a>蒙古舞</a>
					    <a>秧歌</a>
					    <a>现代舞</a>
					    <a>拉丁舞</a>
					    <a>恰恰</a>
					    <a>水兵舞</a>
					    <a>健身操</a>
					    <a>交谊舞</a>
					    <a>扇子舞</a>
					    <a>变队形</a>
					    <a>步子舞</a>
					    <a>形体舞</a>
					    <a>其他</a>
			        </div>
			    </li>
			    <li class="mui-table-view-cell mui-collapse">
			        <a class="mui-navigate-right" href="#">全部难度</a>
			        <div class="mui-collapse-content">
			            <a class="on">全部难度</a>
			            <a>初学</a>
			            <a>适中</a>
			            <a>稍难</a>
			        </div>
			    </li>
			    <li class="mui-table-view-cell mui-collapse">
			        <a class="mui-navigate-right" href="#">人气</a>
			        <div class="mui-collapse-content">
			            <a class="on">人气</a>
			            <a>时间</a>
			        </div>
			    </li>
			</ul>
			<div class="video_list mui-row">
				<div class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#" >
						<img  class="mui-media-object " src="../img/pic1.jpg">
						<span><i>▶</i>50.1 万</span>
						<div class="mui-media-body">当发生大幅第三方第当发生大幅第三方第当发生大幅第三方第</div>
					</a>
				</div>
				<div class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#" >
						<img  class="mui-media-object " src="../img/pic1.jpg">
						<span><i>▶</i>50.1 万</span>
						<div class="mui-media-body">当发生大幅第三方第当发生大幅第三方第当发生大幅第三方第</div>
					</a>
				</div>
				<div class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#" >
						<img  class="mui-media-object " src="../img/pic1.jpg">
						<span><i>▶</i>50.1 万</span>
						<div class="mui-media-body">当发生大幅第三方第当发生大幅第三方第当发生大幅第三方第</div>
					</a>
				</div>
				<div class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#" >
						<img  class="mui-media-object " src="../img/pic1.jpg">
						<span><i>▶</i>50.1 万</span>
						<div class="mui-media-body">当发生大幅第三方第当发生大幅第三方第当发生大幅第三方第</div>
					</a>
				</div>
				<div class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#" >
						<img  class="mui-media-object " src="../img/pic1.jpg">
						<span><i>▶</i>50.1 万</span>
						<div class="mui-media-body">当发生大幅第三方第当发生大幅第三方第当发生大幅第三方第</div>
					</a>
				</div>
				<div class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#" >
						<img  class="mui-media-object " src="../img/pic1.jpg">
						<span><i>▶</i>50.1 万</span>
						<div class="mui-media-body">当发生大幅第三方第当发生大幅第三方第当发生大幅第三方第</div>
					</a>
				</div>
				<div class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#" >
						<img  class="mui-media-object " src="../img/pic1.jpg">
						<span><i>▶</i>50.1 万</span>
						<div class="mui-media-body">当发生大幅第三方第当发生大幅第三方第当发生大幅第三方第</div>
					</a>
				</div>
				<div class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#" >
						<img  class="mui-media-object " src="../img/pic1.jpg">
						<span><i>▶</i>50.1 万</span>
						<div class="mui-media-body">当发生大幅第三方第当发生大幅第三方第当发生大幅第三方第</div>
					</a>
				</div>
				<div class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#" >
						<img  class="mui-media-object " src="../img/pic1.jpg">
						<span><i>▶</i>50.1 万</span>
						<div class="mui-media-body">当发生大幅第三方第当发生大幅第三方第当发生大幅第三方第</div>
					</a>
				</div>
				<div class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#" >
						<img  class="mui-media-object " src="../img/pic1.jpg">
						<span><i>▶</i>50.1 万</span>
						<div class="mui-media-body">当发生大幅第三方第当发生大幅第三方第当发生大幅第三方第</div>
					</a>
				</div>
				<div class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#" >
						<img  class="mui-media-object " src="../img/pic1.jpg">
						<span><i>▶</i>50.1 万</span>
						<div class="mui-media-body">当发生大幅第三方第当发生大幅第三方第当发生大幅第三方第</div>
					</a>
				</div>
				<div class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#" >
						<img  class="mui-media-object " src="../img/pic1.jpg">
						<span><i>▶</i>50.1 万</span>
						<div class="mui-media-body">当发生大幅第三方第当发生大幅第三方第当发生大幅第三方第</div>
					</a>
				</div>
				<div class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#" >
						<img  class="mui-media-object " src="../img/pic1.jpg">
						<span><i>▶</i>50.1 万</span>
						<div class="mui-media-body">当发生大幅第三方第当发生大幅第三方第当发生大幅第三方第</div>
					</a>
				</div>




			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/zepto.min.js"></script>
		<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			mui.plusReady(function(){
				var self = plus.webview.currentWebview();
				class_id= self.class_id;
				$(".mui-title").html(class_id);
				$(".mui-collapse").eq(0).find(".mui-navigate-right").html(class_id);
				$(".mui-collapse-content").on("tap","a",function(){
					$(this).addClass("on").siblings().removeClass("on");
					$(this).parent().siblings("a.mui-navigate-right").html($(this).html());
					$(".mui-active").removeClass("mui-active");
				});
			})
			
		</script>

	</body>

</html>